<template>
  <div class="cell-box">
    <div class="left">
      <div class="search-box box-shadow">
        <a-form
            ref="cellQueryFormRef"
            :model="cellQueryFormState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol">
          <a-form-item label="标段名称">
            <a-select
                v-model:value="cellQueryFormState.sections[0].sectionId">
              <a-select-option
                  v-for="section in sections"
                  :key="section.sectionId" :value="section.sectionId">
                {{section.sectionName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="单元状态">
            <a-select
                v-model:value="cellQueryFormState.status">
              <a-select-option
                  v-for="cellStatus in cellStatusDict.dict2"
                  :key="cellStatus.statusCode" :value="cellStatus.statusCode">
                {{cellStatus.statusName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="工艺类型">
            <a-select
                mode="multiple"
                v-model:value="cellQueryFormState.sections[0].kind">
              <a-select-option
                  v-for="device in kindDict.dict"
                  :key="device.kindCode" :value="device.kindCode">
                {{device.kindName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="单元名称">
            <a-input v-model:value="cellQueryFormState.cellName"/>
          </a-form-item>
          <a-form-item class="button-box">
            <a-button @click="getCellBaseInfoList(null)" type="primary">查询</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="cell-table-box box-shadow">
        <div class="cell-table-header">
          <span>施工单元</span>
          <a-button @click="openSetCellModal" type="primary">新增</a-button>
        </div>
        <div class="cell-table-center">
          <a-table
              :scroll="{y:setHeight('.cell-table-box .cell-table-center', 125) + 'px'}"
              :data-source="cellBaseInfoList.cellInfo"
              :rowKey="(record) => record.cellId"
              @change="getCellBaseInfoList"
              :pagination="{
                'current':cellBaseInfoList.startPage,
                'total':cellBaseInfoList.totalCount,
                'pageSize':cellBaseInfoList.everyPage,
                'showLessItems':true
              }">
            <a-table-column
                title="归属标段"
                data-index="sectionName"
                width="80px"/>
            <a-table-column
                title="单元名称"
                data-index="cellName"
                width="100px"/>
            <a-table-column title="工艺" data-index="kind" width="80px">
              <template #default="{text}">
                <div>{{kindDict.getNameByCode(text)}}</div>
              </template>
            </a-table-column>
            <a-table-column title="修改名称" data-index="cellId" width="80px">
              <template #default="{text,record}">
                <div class="table-icon-box">
                  <div @click="openSetCellNameModal(record)">
                    <FormOutlined />
                  </div>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="操作" data-index="cellId" width="40px">
              <template #default="{text,record}">
                <div class="table-icon-box">
                  <div @click="setCellInfoSwitch(record)">
                    <EditOutlined/>
                  </div>
                  <div @click="delCell(record)">
                    <DeleteOutlined/>
                  </div>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="启停" data-index="cellStatus" width="50px">
              <template #default="{text,record}">
                <a-switch :defaultChecked="text!=0" @change="setCellStatus(record)"/>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </div>
    </div>
    <div class="right">
      <TampCellSet v-if="inSetCell.kind===2" :cellInfo="inSetCell"/>
      <CFGCellSet v-if="inSetCell.kind===10" :cellInfo="inSetCell"/>
      <CompactionCellSet v-if="inSetCell.kind===3 || inSetCell.kind===4 || inSetCell.kind===9" :cellInfo="inSetCell"/>
      <PaverCellSet v-if="inSetCell.kind===8 " :cellInfo="inSetCell"/>
      <RotaryCellSet v-if="inSetCell.kind===15" :cellInfo="inSetCell"/>
      <CementCellSet v-if="inSetCell.kind===22" :cellInfo="inSetCell"/>
    </div>
  </div>
  <SModal
      title="单元录入"
      width="420"
      height="380"
      :isShow="showCellSetFormModal"
      @closed="()=>showCellSetFormModal=!showCellSetFormModal">
    <a-form
        ref="cellSetFormRef"
        class="cellSetForm"
        :model="cellSetFormState"
        :rules="cellSetFormRule"
        :labelCol="{style: 'width: 95px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-form-item name="sectionId" label="标段名称">
        <a-select
            v-model:value="cellSetFormState.sectionId">
          <a-select-option
              v-for="section in sections"
              :key="section.sectionId" :value="section.sectionId">
            {{section.sectionName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="status" label="单元状态">
        <a-select
            v-model:value="cellSetFormState.status">
          <a-select-option
              v-for="cell in cellStatusDict.dict2"
              :key="cell.statusCode" :value="cell.statusCode">
            {{cell.statusName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="kind" label="工艺类型">
        <a-select
            v-model:value="cellSetFormState.kind">
          <a-select-option
              v-for="device in kindDict.dict"
              :key="device.kindCode" :value="device.kindCode">
            {{device.kindName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="cellName" label="单元名称">
        <a-input v-model:value="cellSetFormState.cellName"/>
      </a-form-item>
      <a-form-item class="button-item">
        <a-button @click="()=>showCellSetFormModal=!showCellSetFormModal">取消</a-button>
        <a-button @click="setCell(()=>{showCellSetFormModal = false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="修改单元名称"
      width="420"
      height="180"
      :isShow="showSetCellNameFormModal"
      @closed="()=>showSetCellNameFormModal=!showSetCellNameFormModal">
    <a-form
        ref="cellSetNameFormRef"
        class="cellSetForm"
        :model="cellSetNameFormState"
        :rules="cellSetNameFormRule"
        :labelCol="{style: 'width: 95px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-form-item name="cellName" label="单元名称">
        <a-input v-model:value="cellSetNameFormState.cellName" autocomplete="off"/>
      </a-form-item>
      <a-form-item class="button-item">
        <a-button @click="()=>showSetCellNameFormModal=!showSetCellNameFormModal">取消</a-button>
        <a-button @click="setCellName(()=>{showSetCellNameFormModal = false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
</template>

<script lang="ts">
import {useStore} from "vuex"
import {defineComponent, onMounted, ref} from "vue"
import {setHeight} from "@/utils/tableUtils"
import cellStatusDict from "@/dicts/cellStatusDict"
import deviceTypeDict from "@/dicts/deviceTypeDict"
import kindDict from "@/dicts/kindDict"
import SModal from "@/components/SModal/index.vue"
import TampCellSet from "@/views/control/manager/cellset/TampCellSet.vue"
import CompactionCellSet from "@/views/control/manager/cellset/CompactionCellSet.vue"
import PaverCellSet from "@/views/control/manager/cellset/PaverCellSet.vue";
import CFGCellSet from "@/views/control/manager/cellset/CFGCellSet.vue"
import RotaryCellSet from "@/views/control/manager/cellset/RotaryCellSet.vue";
import CementCellSet from "@/views/control/manager/cellset/CementCellSet.vue";
import {cellBaseInfo} from "@/hooks/cell/index"
import {EditOutlined,DeleteOutlined,FormOutlined} from '@ant-design/icons-vue'

class cellInfo {
  cellId=-1
  kind=2
  sectionId=-1
  sectionName=""
  companyName=""
  cellName="暂未选择"
  cellStatus=1
  workToday=0
  gtmCreateTime=""
  userId=""
}

export default defineComponent({
  setup(){
    const store = useStore()
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])))
    const inSetCell = ref(new cellInfo())
    const {
      cellQueryFormRef,
      cellQueryFormState,
      cellQueryFormRule,
      showCellSetFormModal,
      cellSetFormRef,
      cellSetFormState,
      cellSetFormRule,

      showSetCellNameFormModal,
      cellSetNameFormRef,
      cellSetNameFormState,
      cellSetNameFormRule,

      cellBaseInfoList,
      cellBorder,
      getCellBaseInfoList,
      openSetCellModal,
      openSetCellNameModal,
      setCell,
      setCellName,
      delCell,
      setCellStatus,
      getCellBorder
    } = cellBaseInfo()


    const setCellInfoSwitch = (cellInfo:any)=>{
      let newCellInfo:any = {}
      Object.assign(newCellInfo, cellInfo)
      if(cellInfo){
        switch (newCellInfo.kind) {
          case 2:
            break
          case 3:
            break
          case 4:
            break
          case 8:
            break
          case 9:
            break
          case 10:
            break
          case 15:
            break
          case 22:
            break
          default:
            break
        }
        inSetCell.value = newCellInfo
      }
    }

    onMounted(()=>{
      if(sections.value.length>0){
        cellQueryFormState.value.sections[0].sectionId = sections.value[0].sectionId
        getCellBaseInfoList(null)
      }
    })

    return{
      inSetCell,
      setHeight,
      kindDict,
      setCellInfoSwitch,

      sections,
      cellStatusDict,
      deviceTypeDict,
      cellQueryFormRef,
      cellQueryFormState,
      cellQueryFormRule,

      showCellSetFormModal,
      cellSetFormRef,
      cellSetFormState,
      cellSetFormRule,

      showSetCellNameFormModal,
      cellSetNameFormRef,
      cellSetNameFormState,
      cellSetNameFormRule,

      cellBaseInfoList,
      cellBorder,
      getCellBaseInfoList,
      openSetCellModal,
      openSetCellNameModal,
      setCell,
      setCellName,
      delCell,
      setCellStatus,
      getCellBorder
    }
  },
  components:{
    SModal, TampCellSet, CompactionCellSet, CFGCellSet, PaverCellSet, RotaryCellSet, CementCellSet, EditOutlined, DeleteOutlined, FormOutlined
  },
})
</script>

<style lang="scss" scoped>
.cell-box{
  display: flex;
  width: 100%;
  height: 100%;
  .left{
    display: flex;
    flex-direction: column;
    width: 518px;
    height: 100%;
    .search-box{
      padding: 20px 30px;
      box-sizing: border-box;
      ::v-deep .ant-form-item-label > label{
        color: #666666;
      }
      ::v-deep .ant-select{
        width: 388px;
      }
      ::v-deep .ant-input{
        width: 388px;
      }
      ::v-deep .ant-row{
        margin-bottom: 12px;
        justify-content: center;
      }
      ::v-deep .ant-row:last-child{
        justify-content: flex-end;
      }
      ::v-deep button{
        margin-left: 18px;
      }
      .button-box{
        margin-top: 6px;
      }
    }
    .cell-table-box{
      display: flex;
      flex-direction: column;
      padding-left: 13px;
      padding-right: 13px;
      .cell-table-header{
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 18px;
        padding-left: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
        >span{
          display: block;
          font-size: 18px;
          font-weight: bold;
          line-height: 32px;
        }
        ::v-deep button{
          margin-right: 16px;
          margin-left: auto;
        }
      }
      .cell-table-center{
        flex: 1;
        width: 100%;
        height: 100%;
      }
    }
    >div:first-child{
      width: 100%;
      height: 290px;
    }
    >div:last-child{
      margin-top: 20px;
      width: 100%;
      flex: 1;
    }
  }
  .right{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 20px;
    height: 100%;
  }
}
::v-deep .cellSetForm{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  box-sizing: border-box;

  .ant-input{
    width: 250px;
  }
  .ant-select{
    width: 250px;
  }
  .ant-form-item-with-help {
    margin-bottom: 0px !important;
  }
  .ant-form-item{
    margin-bottom: 23px;
  }
  .button-item{
    position: absolute;
    right: 24px;
    bottom: 0px;
    margin-right: 0;
    button{
      margin-left: 8px;
    }
  }
}
</style>
